<template>
  <div class="imginfo">
    <div class="container" >
      <h3 class="title">{{photos.title}}</h3>
      <p class="subtitle">
        <span>发表时间:{{photos.add_time}}</span>
        <span>点击次数:{{photos.click}}次</span>
      </p>
      <hr>
      <div class="content">
       <vue-preview :slides="slide1" @close="handleClose"></vue-preview>
       <p class="description" v-html="photos.content"></p>
      </div>
    </div>
    <comment-box :id="id"></comment-box>
  </div>
  
  
</template>

<script>
import axios from 'axios'
import comment from '../subcomponents/comment.vue'
export default {
  data(){
    return{
      id:this.$route.params.id,
      photos:{},
      slide1: [
          {
            src: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg',
            msrc: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg',
            // alt: 'picture1',
            // title: 'Image Caption 1',
            w: 600,
            h: 300
          },
          {
            src: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_b.jpg',
            msrc: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_m.jpg',
            // alt: 'picture2',
            // title: 'Image Caption 2',
            w: 600,
            h: 300
          },
          {
            src: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_b.jpg',
            msrc: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_m.jpg',
            // alt: 'picture2',
            // title: 'Image Caption 2',
            w: 600,
            h: 300
          }
        ]
    }
  },
   created(){
     this.getphootinfo();
     this.handleClose ()
  },
  methods:{
    getphootinfo(){
      axios.get("api/getimageInfo/"+this.id).then(res=>{
        this.photos=res.data.message[0]
      })
    },
    handleClose () {
        // console.log('close event')
      }
  },
  components:{
    "comment-box":comment
  }
  
}
</script>

<style lang="less">
.imginfo{
  .container{
    .title{
    font-size: 14px;
    color:#007aff;
    text-align: center;
    margin: 15px 0;
    }
    .subtitle{
    display: flex;
    color: #ccc;
    font-size: 12px;
    justify-content: space-between;
    padding: 0;
    margin: 0;
    }
  }
  
}
</style>